<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>收集表单数据</title>
</head>
<body>
    <!-- v-model修饰符
        trim
        number
        lazy
    -->
    <div id="app">
        <form @submit.prevent="submit">
            <label for="username">账号：</label><input type="text" id="username" v-model.trim="user.username"> <br>

            <label for="password">密码：</label><input type="password" name="" id="password" v-model="user.password"> <br>

            <label for="">性别：</label> 
            <label for="nan">男</label><input type="radio" name="sex" id="nan" value="man" v-model="user.sex">
            <label for="nv">女</label><input type="radio" name="sex" id="nv" value="woman" v-model="user.sex"> <br>

            <label for="">爱好：</label>
            <label for="smoke">抽烟</label> <input type="checkbox" name="hobby" id="smoke" value="smoke" v-model="user.hobby">
            <label for="drink">喝酒</label> <input type="checkbox" name="hobby" id="drink" value="dirnk" v-model="user.hobby">
            <label for="fire-hair">烫头</label> <input type="checkbox" name="hobby" id="fire-hair" value="fire-hair" v-model="user.hobby"> <br>

            <label for="">所属校区</label>
            <select name="" id="" v-model="user.school">
                <option :value="school" v-for="school in user.schools">{{school}}</option>
            </select> <br>

            <label for="other">其他信息</label> <textarea name="" id="" cols="20" rows="3" v-model.lazy="user.other"></textarea> <br>

            <input type="checkbox" name="" id="" v-model="user.agree"><b>阅读并接受<a href="http://www.baidu.com" target="_black">用户协议</a></b>
            <button>提交</button>
        </form>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                user:{
                    username:'',
                    password:'',
                    sex:'',
                    hobby:[],
                    school:'北京',
                    schools:['北京','上海','武汉','深圳'],
                    other:'',
                    agree:true,
                }
            },
            methods: {
                submit(){
                    console.log(this.user);
                    console.log(JSON.stringify(this.user));
                }
            },
        })
    </script>
</body>
</html>